<template>
  <div class="page-wrapper">
    <div
      v-if="mask"
      class="mask"
      @click="closeMODEl"
    ></div>
    <transition name="slideFade">
      <div v-if="show">
        <div
          v-for="(item, index) in pages"
          :key="index"
          class="page-item"
          :class="{
            [`rotate-${index - active}`]: index === active + 1 || index === active + 2,
            out: index < active,
            active: index === active,
            'over-page': active + 2 < index
          }"
        >
          <div class="bg"></div>
          <div
            class="content"
            :class="{ 'pl-0': !scroll }"
          >
            <!-- 标题 -->
            <div class="header px-12px pt-8px">
              <div>
                <slot name="title"></slot>
              </div>
              <!-- 关闭 -->
              <img
                class="close"
                src="@/assets/icons/h5/play_up.png"
                @click="closeMODEl"
              />
            </div>
            <div class="desc pl-12px">
              <slot name="desc"></slot>
            </div>
            <!-- 正文 -->
            <div
              v-if="scroll && index === active"
              class="content-scroll pl-12px"
              :class="{ 'scrolling': isScroll && scroll }"
              @scroll="onScroll"
            >
              <slot name="content"></slot>
            </div>
            <div
              v-else
              class="pl-12px"
            >
              <slot name="content"></slot>
            </div>
            <!-- 底部 -->
            <div
              class="footer"
              :class="{ 'opacity-0': index !== active }"
            >
              <slot name="footer"></slot>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script lang="ts" name="PageWrapper" setup>
const props = defineProps({
  // 当前显示页index
  active: {
    type: Number,
    default: 0,
  },
  // 页数 默认3页
  nodes: {
    type: Number,
    default: 3,
  },
  // 是否显示遮罩
  mask: {
    type: Boolean,
    default: false
  },
  // 正文是否显示滚动效果
  scroll: {
    type: Boolean,
    default: true
  }
})
const emit = defineEmits(['changePage', 'close'])

const show = ref(false)
const isScroll = ref(false)
const scrollTop = ref(0)

const pages = computed(() => {
  return new Array(props.nodes)
})

const closeMODEl = () => {
  show.value = false
  setTimeout(() => {
    emit('close')
  }, 150)
}

// 滚动条监听
const onScroll = () => {
  const querySelector = document.querySelector('.content-scroll') as HTMLElement

  scrollTop.value = querySelector.scrollTop
  if (querySelector.scrollTop) {
    isScroll.value = true
  } else {
    isScroll.value = false
  }
}

onMounted(() => {
  show.value = true
})


defineExpose({ closeMODEl })
</script>

<style lang="scss" scoped>
$time: 0.2s;

.slideFade-enter {
  z-index: 1;
  animation: slideFade-fade-in $time ease;
}

.slideFade-leave {
  z-index: 1;
  animation: slideFade-fade-out $time ease forwards;
}

.slideFade-enter-active {
  z-index: 1;
  animation: slideFade-fade-in $time ease;
}

.slideFade-leave-active {
  z-index: 1;
  animation: slideFade-fade-out $time ease forwards;
}

@keyframes slideFade-fade-in {
  0% {
    transform: translate3d(100%, 0, 0); // 上下左右动画, 100%为从右到左
    opacity: 1;
  }

  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes slideFade-fade-out {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }

  100% {
    transform: translate3d(100%, 0, 0);
    opacity: 1;
  }
}

.content-scroll {
  @apply overflow-auto;
  height: 340px;
  margin-top: 8px;
  padding-bottom: 20px;

  &::-webkit-scrollbar {
    width: 2px;
  }

  &::-webkit-scrollbar-thumb,
  &::-webkit-scrollbar-thumb:hover,
  &::-webkit-scrollbar-thumb:active {
    background: rgba(76, 190, 255, 1);
  }
}



.page-wrapper {
  @apply absolute z-150 right-0;
  box-sizing: border-box;
  width: 276px;
  bottom: 150px;
  padding-top: 41.5px;
  min-height: 461.5px;
  border-radius: 8px 0 0 8px;
  overflow: hidden;

  .mask {
    @apply fixed backdrop-filter backdrop-blur-1px top-0 left-0 right-0 bottom-0 z-1000 text-white;
    background-color: rgba(0, 0, 0, 0.25);
  }

  .scrolling {
    mask: linear-gradient(transparent 0, black 20px, black 90%, transparent 100%);
    -webkit-mask: linear-gradient(transparent 0, black 20px, black 90%, transparent 100%);
  }

  .page-item {
    @apply absolute w-full h-full z-1001 opacity-100;
    border: 1px solid #2A3F66;
    border-right: 0;
    border-radius: 8px 0 0 8px;
    color: #ffffff;
    transition: all 0.25s;
    transform: perspective(28px) rotateY(0);
    transform-origin: bottom right;
    background: rgba(4, 15, 44, 0.25);
    height: 420px;

    .bg {
      @apply absolute w-full h-full backdrop-filter backdrop-blur-22px;
      border-radius: 8px 0 0 8px;
    }

    .header {
      @apply relative flex justify-between items-center;

      .close {
        @apply cursor-pointer;
        height: 18px;
        width: 38px;

        &:active {
          opacity: 0.45;
        }
      }
    }

    .content {
      @apply relative flex flex-col opacity-0;
      min-height: 340px;
      height: 100%;

      &.pl-0 {
        padding-left: 0;
      }
    }

    &.rotate-2 {
      transform: rotate(9.02deg);
      transform-origin: bottom right;
      z-index: 1002;
      opacity: 1;
    }

    &.rotate-1 {
      transform: rotate(5.02deg);
      transform-origin: bottom right;
      z-index: 1003;
    }

    &.over-page {
      opacity: 0;
      z-index: 1002;
      transform: rotate(9.02deg);
      transform-origin: bottom right;
    }

    &.out {
      opacity: 0;
      z-index: 1003;
      transform-origin: bottom right;
      transform: perspective(28px) rotateY(-0.5deg);
      pointer-events: none;
    }

    &.active {
      transform: skewX(0) rotate(0);
      z-index: 1006;
      background: rgba(4, 15, 44, 0.55);

      .content {
        opacity: 1;
      }

      &::before {
        @apply absolute z-100;
        content: '';
        height: 100px;
        width: 100px;
        left: -26.1px;
        top: -26px;
        background: url('@/assets/icons/h5/menu_highlight.svg');
        transform: scale(0.5);
      }

      .footer {
        // position: absolute;
        bottom: 0;
        width: 100%;
        // height: 50px;
      }
    }
  }

  // .content {
  //   display: flex;
  //   // flex-direction: ;
  // }
}</style>